<template>
	<view class="maintenance">
		<view v-if="maintenance.length">
			<view class="maintenance-list" v-for="(item, index) in maintenance" :key="index">
				<view class="maintenance-list-datetime">{{item.datetime}}</view>
				<view class="maintenance-list-item">
					<view class="maintenance-list-item-tit">
						{{item.tit}}
					</view>
					<view class="maintenance-list-item-con">
						{{item.con}}
					</view>
				</view>
			</view>
		</view>
		<view v-else class="no-data">
			<image class="no-data-img" src="../../static/images/no-data.png" mode="aspectFit"></image>
			无消息数据
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				maintenance: [
					// {
					// 	datetime: '2018年4月16日 08:32',
					// 	tit: '维修保养通知',
					// 	con: '尊敬的用户，你的编号为L008的净水器滤芯即将到保养期，近期将有售后人员和你联系。',
					// },
					// {
					// 	datetime: '2018年4月17日 12:03',
					// 	tit: '维修保养通知',
					// 	con: '尊敬的用户，你的编号为L008的净水器滤芯即将到保养期，近期将有售后人员和你联系。',
					// }
				]
			}
		},
		onLoad() {

		},
		methods: {
			pageTo() {
				uni.navigateTo({
					url: 'progressDetail'
				});
			},
		}
	}
</script>

<style lang="scss">
	.maintenance{
		padding-top: 45rpx;
		&-list{
			margin-bottom: 30rpx;
			&-datetime{
				width: 250rpx;
				margin: 0 auto 30rpx;
				text-align: center;
				border-radius: $uni-border-radius-sm1;
				font-size: $uni-font-size-sm1;
				background: $uni-bg-color-grey2;
				color: $uni-text-color-inverse;
			}
			&-item{
				background: $uni-bg-color;
				border-radius: $uni-border-radius-base;
				margin: 0 30rpx;
				padding: 20rpx 30rpx;
				&-tit{
					font-size: $uni-font-size-lg1;
				}
				&-con{
					font-size: $uni-font-size-sm2;
					line-height: 50rpx;
				}
			}
		}
	}
</style>
